<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 模板语法  -->
        <!-- 可以直接获取绑定的vue里面data的数据 -->
        <h2>{{ msg }}</h2>
    </div>

    <div id="content" >
        {{ msg }}
        <!-- 渲染文本 -->
        <div v-text="msg"></div>
        <!-- 渲染标签 -->
        <div v-html="msg"></div>
        <!-- 调用函数 -->
        <div>{{ add(2,3) }}</div>
        <button v-on:click="handlerClick">隐藏</button>
        <div class="box" v-show="isShow"></div>
        <div class="box2" v-if="isShow"></div>
        <!-- 里面乐意放数据, 可以调用函数, 写可以写函数名, 可以获取data的属性名 -->
        <div v-if="Math.random() > 0.5">
            有了
        </div>
        <div v-else>
            没了
        </div>
    </div>
    <!--1. 引包 -->
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                msg:"hello"
            }
        });
        new Vue({
            el: '#content',
            data() {
                // data中可以是空对象 但是不能不return
                return {
                    msg: "<h2>你好</h2>",
                    // 控制是否展示
                    isShow:true,
                }
            },
            // 定义函数, 可以在标签中调用
            methods: {
                add(x, y) {
                    return x + y
                },
                handlerClick() {
                    // 事件处理 数据驱动
                    console.log(this);
                    this.isShow = !this.isShow;

                },
            },
        });
    </script>
</body>

</html>